<template>
    <div class="company-user-list" v-show="isShow">
        <ul class="global-operation-list">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">客户状态：</h2>
                        <el-select
                            v-model="searchForm.followType"
                            clearable
                            filterable>
                            <el-option
                                v-for="(item,index) in followTypeList"
                                :key="index"
                                :label="item.sysValueName"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">拜访日期：</h2>
                        <el-date-picker
                            v-model="searchForm.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="init">清空</el-button>
                    </li>
                    <li class="global-filter-item" v-if="operationList.includes('add')">
                        <el-button type="primary" class="global-filter-item-search" @click="add">新增</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table-content-a">
                <el-table :data="dataList" style="width: 100%" 
                border max-height="620"
                    :row-style="{height: '0'}"
                    :cell-style="{padding: '2px'}"
                v-loading="tableLoading">
                    <el-table-column prop="visitTime" label="拜访时间" show-overflow-tooltip width="150px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.visitTime">{{ formatterDate(scope.row.visitTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="followTypeName" label="跟进方式" show-overflow-tooltip width="100px">
                    </el-table-column>
                    <el-table-column prop="followContent" label="跟进内容" show-overflow-tooltip width="450px">
                    </el-table-column>
                    <el-table-column prop="followPic" label="图片" show-overflow-tooltip width="150px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.followPic">
                                <el-button type="text" size="small" @click="showImg(scope.row.followPic)">查看图片</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="150px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.createTime">{{ formatterTime(scope.row.createTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-dropdown @command="handleCommand($event, scope.row)">
                                <span class="el-dropdown-link" style="color: #03C192;cursor: pointer;">
                                    操作
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="edit" v-if="operationList.includes('edit')">编辑</el-dropdown-item>
                                    <el-dropdown-item command="handleClickDel" v-if="operationList.includes('del')">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <!-- <div v-if="operationList.includes('edit')">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            </div>
                            <div v-if="operationList.includes('del')">
                                <el-popconfirm
                                    @confirm="handleClickDel(scope.row)"
                                    title="确定删除吗？"
                                    >
                                    <el-button type="text" size="small" slot="reference">删除</el-button>
                                </el-popconfirm>
                            </div> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="global-page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                        layout="sizes, total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            title="图片"
            :visible.sync="picDialogVisible"
            width="60%"
            :before-close="handleClosePic">
            <div style="margin: 20px;">
                <div style="display: flex;flex-wrap: wrap;">
                    <div v-for="(item,index) in picList" :key="index">
                        <el-image :src="item" :preview-src-list="picList" :initial-index="index" style="width: 100px; height: 100px; margin-right: 10px;" />
                    </div>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import APISysLabel from "@/api/apiSysLabel";
import APIBusinessAccount from "@/api/apiBusinessAccount";

export default {
    name: "FollowDetail",
    components: {
    },
    props: {
        operationList: Array,
        isShow: Boolean,
        businessAccountId: Number,
    },
    watch: {
        isShow(val) {
            if (val) {
                this.getPost()
            }
        },
        businessAccountId(val){
            if (val) {
                this.searchForm.businessAccountId = val
                this.pageSize = 10
                this.pageSizes = [10, 15]
                this.getPost()
                this.getSysList()
            }
        },
    },
    data() {
        return {
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 20,
            pageNum: 1,
            total: 0,
            pageSizes: [20, 30, 50],
            tokenData: {
                token: "",
            },
            searchForm: {
                date: null,
                followType: null,
                businessAccountId: null,
            },
            followTypeList: [],
            dateShow: false,
            picDialogVisible: false,
            picList: [],
        };
    },
    created(){
        if(this.businessAccountId){
            // 客户列表点击跟进信息的时候进行的操作
            this.searchForm.businessAccountId = this.businessAccountId
            this.pageSize = 10
            this.pageSizes = [10, 15]
            this.getPost()
            this.getSysList()
        }
    },
    activated() {
        this.tokenData.token = this.$store.state.token;
        if(this.$route.query.businessAccountId){
            this.searchForm.businessAccountId = this.$route.query.businessAccountId
        }
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.getPost()
        this.getSysList()
    },
    mounted() {
        this.tokenData.token = this.$store.state.token
    },
    methods: {
        handleCommand(e, row){
            let that = this
            if(e == "edit"){
                this.edit(row)
            }else if(e == "handleClickDel"){
                this.$confirm('确定删除吗？', '', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        that.handleClickDel(row)
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: "取消成功"
                        })
                    });
            }
        },
        handleClosePic(){
            this.picDialogVisible = false
        },
        showImg(pic){
            this.picList = pic.split(",")
            this.picDialogVisible = true
        },
        handleClickDel(row){
            const params = {
                token: this.$store.state.token,
                id: row.id,
            };
            APIBusinessAccount.doDelFollowBusinessList(params).then((res) => {
                if (res.key === 1000) {
                    this.getPost();
                }
            });
        },
        edit(row){
            localStorage.setItem("editBusinessAccountFollow", JSON.stringify(row))
            this.$router.push({
                path: '/EditFollow',
                query: {
                    followId: row.id,
                    businessAccountId: this.searchForm.businessAccountId,
                }
            })
        },
        add(){
            this.$router.push({
                path: '/EditFollow',
                query: {
                    businessAccountId: this.searchForm.businessAccountId,
                }
            })
        },
        getSysList() {
            const params = {
                token: this.$store.state.token,
                sysLabelIds: "30",
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    if(res.data){
                        this.followTypeList = res.data[30]
                    }
                }
            });
        },
        formatterDate(time) {
            return this.$moment(time).format("YYYY-MM-DD");
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        // 全局初始化
        init() {
            // 搜索条件重置
            this.searchForm = {
                date: null,
                followType: null,
                businessAccountId: this.searchForm.businessAccountId,
            };
            this.rePosts();
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        // 表格列表
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            if(this.searchForm.businessAccountId){
                params.businessAccountId = this.searchForm.businessAccountId
            }
            if(this.searchForm.followType){
                params.followType = this.searchForm.followType
            }
            if(this.searchForm.date && this.searchForm.date.length > 1){
                params.startTime = new Date(this.searchForm.date[0]).getTime()
                params.endTime = new Date(this.searchForm.date[1]).getTime()
            }
            APIBusinessAccount.viewFollowBusinessList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },
    },
};
</script>

<style lang="sass">
.avatar-uploader
    .el-upload
      border: 1px dashed #d9d9d9
      border-radius: 6px
      cursor: pointer
      position: relative
      overflow: hidden
      &:hover
        border-color: #409eff
      .avatar-uploader-icon
        font-size: 28px
        color: #8c939d
        width: 100px
        height: 100px
        line-height: 100px !important
        text-align: center
      .avatar
        width: 100px
        height: 100px
        display: block
</style>
<style lang="sass" scoped>
.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  //@include container
  .isStatus1
    width: 41px
    height: 21px
    background: #F1FFFC
    border-radius: 3px
    border: 1px solid #03C192
    font-size: 14px!important
    color: #03C192!important
    line-height: 21px
    text-align: center
  .isStatus2
    width: 41px
    height: 21px
    background: #FFF2F2
    border-radius: 3px
    border: 1px solid #F46565
    font-size: 14px!important
    color: #F44141!important
    line-height: 21px
    text-align: center
  .global-operation-left
    margin-right: 0
  ::v-deep .permission-dialog
    .el-dialog__body
      display: flex
      align-items: center
      flex-direction: column
      padding: 30px 60px
      .permission-dialog-tree
        width: 100%
        max-height: 450px
        overflow-y: auto
        overflow-x: hidden
        margin-bottom: 40px
  .global-table
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    .list
      background: #FFFFFF
      box-shadow: 0px 0px 10px 0px rgba(93, 139, 198, 0.05)
      border-radius: 14px
      margin-bottom: 15px
      width: 100%
      display: flex
      align-items: center
      justify-content: space-between
      padding: 19px 24px
      .left
        display: flex
        align-items: center
        .img
          width: 90px
          height: 90px
          border-radius: 4px
          margin-right: 17px
        .nav
          .text1
            font-size: 20px
            font-weight: bold
            color: #222222
            line-height: 26px
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 16px
            span
              height: 16px
              background: #FFF8ED
              border-radius: 11px
              border: 1px solid #FF9901
              font-size: 12px
              color: #FF9901
              line-height: 16px
              padding: 0 8px
              display: block
              text-align: center
              margin-left: 11px
          .text2
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 25px
            i
              font-size: 20px
              color: #1861FD
              margin-right: 7px
            .text2_1
              font-size: 14px
              color: #222222
              line-height: 19px
              margin-right: 7px
            .text2_2
              margin-left: 5px
              font-size: 23px
              font-weight: bold
              color: #222222
              line-height: 29px
              margin-right: 3px
            .text2_3
              font-size: 14px
              color: #B5B5C3
              line-height: 19px
          .text3
            display: flex
            align-items: center
            i
              font-size: 14px
              color: #B5B5C3
              margin-right: 5px
            div
              font-size: 14px
              color: #B5B5C3
              line-height: 19px
              margin-right: 80px
      .right
//.permission-dialog-item
//  background: #f2f2f2

</style>
